
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import * as React from "react";

import Actions from './Actions';
import Store from './Store';
import {ActivityIndicator, Icon, InputItem, List, NavBar, NoticeBar, Picker, Result, WhiteSpace} from "antd-mobile";

import { Control } from 'react-keeper'

class ReAuth extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    Actions.customInit(this.props.params.doorId);
  }

  onReAuth() {
    Actions.onReAuth();
  }

  onGoBack() {
    Control.replace('/home/my');
  }

  render() {

    let content = this.state.ReAuth.isLoading ?
      <div className="loading-example">
        <div className="align">
          <ActivityIndicator
            toast
            text="加载中..."
            animating={this.state.ReAuth.isLoading}
          />
        </div>
      </div>
      :
      <div>
        <NavBar
          mode="dark"
          rightContent={this.state.ReAuth.isReAuth ? <div onClick={() => this.onGoBack()}>关闭</div> : <div onClick={() => this.onReAuth()}>删除</div>}
          leftContent={this.state.ReAuth.isReAuth ? null : <div onClick={() => this.onGoBack()}>返回</div>}
        >删除授权</NavBar>
        {
          this.state.ReAuth.isReAuth ?
            <div>
              {
                this.state.ReAuth.isReAuthSuccess ?
                  <Result
                    img={<Icon type="check-circle" style={{ fill: '#1F90E6', width: '60px', height: '60px' }} />}
                    title="授权删除成功"
                    message={'您已成功将授权删除'}
                  />
                  :
                  <Result
                    img={<Icon type="cross-circle-o" style={{ fill: '#F13642', width: '60px', height: '60px' }} />}
                    title="授权删除失败"
                    message={'授权删除失败，可关闭后再试一次。'}
                  />
              }
            </div>
            :
            <div>
              <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>
                请确认下列信息，确认无误后，选择删除授权。
              </NoticeBar>
              <List renderHeader={<div>被授权的房屋信息</div>}>
                <InputItem value={this.state.ReAuth.door.courtName} editable={false}>小区名称</InputItem>
                <InputItem value={this.state.ReAuth.door.doorNo} editable={false}>门牌号</InputItem>
              </List>
              <List renderHeader={<div>被授权的人信息</div>}>
                <InputItem value={this.state.ReAuth.authInfo.data.name} editable={false}>姓名</InputItem>
                <InputItem value={this.state.ReAuth.authInfo.data.idNo} editable={false}>身份证</InputItem>
                <InputItem value={this.state.ReAuth.authInfo.data.phone} editable={false}>手机</InputItem>
                <InputItem value={this.state.ReAuth.authInfo.data.gender === 1 ? '男' : '女'} editable={false}>性别</InputItem>
              </List>
            </div>
        }
      </div>;

    return (
      <div>
        {content}
      </div>
    );
  }
}

ReactMixin.onClass(ReAuth, Reflux.connect(Store, 'ReAuth'));

export default ReAuth;
